
<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div class="search-title">快速查询</div>
          <!--过滤暂时不显示，因为对于新增和删除的数据都是直接操作表格，不是操作源，导致删除和新增的数据任然存在-->
          <el-input v-model="txtsearch" placeholder="评语代码|内容|备注" style="width:200px"></el-input>
          <div class="top-deal">
              <el-button @click="InitPage" icon="el-icon-search" type="primary" v-has="'PINQUERY'" :disabled="changeflag">查询</el-button>
              <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'" :disabled="changeflag">新增</el-button>
              <el-button @click="btnDelete" icon="el-icon-delete" v-has="'PDELETE'" :disabled="changeflag">删除</el-button>
              <el-button @click="btnSave" icon="el-icon-document" v-has="'PMODIFY'" :disabled="!changeflag">保存</el-button>
              <el-button @click="btnClear" icon="el-icon-close" :disabled="!changeflag">取消</el-button>
              <el-button @click="btnExport" icon="el-icon-upload2">导出</el-button>
              <el-button icon="el-icon-files" @click="ImportCsv" ref="importFile">导入</el-button>
              <div class="upload-button">
                  <el-upload ref="upload" 
                      :action="url" accept=".dat" 
                      :before-upload="beforeUploadFile" :on-change="fileChange" :show-file-list="showFile"
                      :data="updata" :http-request="uploadOpt">
                      <el-button size="small" plain>选择文件</el-button>
                      <!-- <div slot="tip" class="el-upload__tip">只能上传DAT(*dat)文件，且不超过10M</div> -->
                  </el-upload>
              </div>
              <el-button @click="btnCopy" icon="el-icon-document-copy" style="margin-left: 10px;">复制</el-button>
              <el-button @click="btnPaste" icon="el-icon-tickets">粘贴</el-button>
          </div>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <vxe-table :data="list" :loading="loading" :keyboard-config="keyConfig" :row-class-name="rowClassName1" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false}" @current-change="currentChange" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                  <vxe-table-column field="germcommentid" title="评语ID" width="70" align="center"></vxe-table-column>
                  <vxe-table-column field="germcommentcode" title="评语代码" width="75"></vxe-table-column>
                  <vxe-table-column field="germcommentname" title="评语内容" width="555"></vxe-table-column>
                  <vxe-table-column field="descriptions" title="备注说明" width="190"></vxe-table-column>
                  <vxe-table-column field="seq" title="序号" width="50" align="center"></vxe-table-column>
              </vxe-table>
          </div>
          <div class="middle-right" v-loading="pageinitloading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
              <el-form :model="lab_germcomment">
                  <table class="table1style" style="width:100%;font-size:12px">
                      <tr>
                          <td align="right" style="width:60px">评语ID</td>
                          <td colspan="3">
                              <el-input v-model="lab_germcomment.germcommentid" @input="hasChange" :readonly="true"></el-input>
                          </td>
                      </tr>
                      <tr>
                          <td align="right">评语代码</td>
                          <td>
                              <el-input v-model="lab_germcomment.germcommentcode" @input="hasChange"></el-input>
                          </td>
                          <td align="right">序号</td>
                          <td>
                              <el-input v-model="lab_germcomment.seq" @input="hasChange"></el-input>
                          </td>
                      </tr>
                      <tr>
                          <td align="right" style="vertical-align:top">评语内容</td>
                          <td colspan="3">
                              <el-input type="textarea" v-model="lab_germcomment.germcommentname" @input="hasChange" :autosize="{ minRows: 12, maxRows: 40}"></el-input>
                          </td>
                      </tr>
                      <tr>
                          <td align="right" style="vertical-align:top">备注说明</td>
                          <td colspan="3">
                              <el-input type="textarea" v-model="lab_germcomment.descriptions" @input="hasChange" :autosize="{ minRows: 10, maxRows: 30}"></el-input>
                          </td>
                      </tr>
                  </table>
              </el-form>
          </div>

      </div>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
import XLSX from "xlsx";
import FileSaver from "file-saver";
import axios from "axios";
export default {
  name: "LIS847",
  data() {
      return {
          txtsearch: "",
          changeflag: false,
          lab_germcomment: {
              germcommentid: "",
              germcommentcode: "",
              germcommentname: "",
              descriptions: "",
          },
          tmplab_germcomment: {},
          loading: false,
          keyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
              isArrow: true,
          },
          keyLocalConfig: {
              isArrow: true,
          },
          pageinitloading: false,
          selectConfig: { tigger: "row" },
          labelPosition: "right",
          AddData: [],
          ModData: [],
          tableData: [],
          tableColumn: [],
          actionindex: "M",
          form: {},
          showFile: false,
          url: "",
          updata: { action: "BACCOMMOMUPLOAD" }, 
      };
  },
  created() {
      this.InitPage(); //初始化主列表
      //this.getinitdata(); //初始化下拉框的数据
  },
  mounted() {
      this.url = this.$tool.baseUrl.replace(/api/, "z") + "fileupload";
  },
  updated() {},
  watch: {
      txtsearch(val) {
          let row = this.list[0];
          if (row) {
              this.hightLightRow(row);
          } else {
              this.hightLightRow(false);
          }
      },
  },
  computed: {
      list() {
          let filterName = this.txtsearch.trim();
          if (filterName) {
              let rest = this.tableData.filter((item) => {
                  return (item.germcommentcode ? item.germcommentcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false) || (item.inputcode ? item.inputcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false) || (item.testgroupname ? item.testgroupname.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false);
              });
              return rest;
          } else {
              return this.tableData;
          }
      },
  },
  methods: {
      InitPage() {
          this.loading = true;
          this.$tool
              .request({
                  url: "LIS/LIS8/LIS847",
                  method: "post",
                  data: {
                      action: "InitPage",
                  },
              })
              .then((res) => {
                  this.tableData = res.data;
                  if (this.tableData.length == 0) this.actionindex = "A";
                  this.hightLightRow(res.data[0]);
                  this.loading = false;
              })
              .catch((err) => {
                  this.loading = false;
              });
      },
      activeMethod({ row }) {
          return true;
      },
      hasChange() {
          this.changeflag = true;
      },
      async hightLightRow(row) {
          if (row) {
              this.$refs.xTable.setCurrentRow(row);
              await this.querydetail(row);
          } else {
              this.$refs.xTable.setCurrentRow(null);
              this.lab_germcomment = {};
              this.actionindex = "A";
          }
      },
      btnAdd() {
          this.changeflag = true;
          this.actionindex = "A";
          this.lab_germcomment = {
              germcommentid: "",
              germcommentcode: "",
              germcommentname: "",
              descriptions: "",
          };
      },
      btnDelete() {
          this.$confirm("您确定要删除这条数据吗？", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          })
              .then(() => {
                  this.actionindex = "D";
                  this.startDelete();
              })
              .catch(() => {});
      },
      async startDelete() {
          try {
              var delrow = this.$refs.xTable.getCurrentRow();
              if (delrow) {
                  var alld = this.$refs.xTable.tableData;
                  var rowindex = alld.indexOf(delrow);
                  this.$refs.xTable.remove(delrow);
                  await this.btnSave().then(() => {
                      this.tableData.splice(rowindex, 1);
                      let havedata = this.$refs.xTable.tableData;
                      if (havedata.length > 0) {
                          if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                          let selectrow = havedata[rowindex];
                          this.hightLightRow(selectrow);
                      } else {
                          this.hightLightRow(false);
                      }
                  });
              }
          } catch (e) {
              console.log("error", e);
          }
      },
      async querydetail(row) {
          try {
              this.selrow = row;
              this.actionindex = "M";
              this.pageinitloading = true;
              const res = await this.$tool.request({
                  url: "LIS/LIS8/LIS847",
                  method: "post",
                  data: {
                      action: "querydetail",
                      germcommentid: row.germcommentid,
                  },
              });
              if (res.labgermcomment[0]) {
                  this.lab_germcomment = res.labgermcomment[0];
              } else {
                  this.lab_germcomment = {};
              }
              this.tmplab_germcomment = XEUtils.clone(this.lab_germcomment, true);
              this.pageinitloading = false;
          } catch (e) {
              this.pageinitloading = false;
              this.$alert(e);
          }
      },
      async btnSave() {
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS8/LIS847",
                  method: "post",
                  data: {
                      action: "savedata",
                      utype: this.actionindex,
                      oldinfo: this.tmplab_germcomment,
                      newinfo: this.lab_germcomment,
                  },
              });
              if (res.errcode == "1") {
                  this.$message.success("保存成功！");
                  this.changeflag = false;
                  let keyid = res.row.germcommentid + "$" + res.row.germcommentcode;
                  if (this.actionindex == "A") {
                      if (this.AddData.indexOf(keyid) == -1) this.AddData.push(keyid);
                      this.$refs.xTable.insert(res.row).then(({ row }) => {
                          this.tableData.push(row);
                          this.hightLightRow(row);
                      });
                  } else if (this.actionindex == "M") {
                      if (this.ModData.indexOf(keyid) == -1) this.ModData.push(keyid);
                      await this.SetToTable(res.row).then((row) => {
                          this.hightLightRow(row);
                      });
                  } else {
                      this.actionindex = "M";
                  }
              } else {
                  this.$message.error("保存失败！" + res.errmsg);
              }
          } catch (e) {
              this.$alert(e);
          }
      },
      SetToTable(obj) {
          return new Promise((s, f) => {
              this.selrow.germcommentid = obj.germcommentid;
              this.selrow.germcommentcode = obj.germcommentcode;
              this.selrow.germcommentname = obj.germcommentname;
              this.selrow.descriptions = obj.descriptions;
              s(this.selrow);
              return;
          });
      },
      btnExport() {
          // if (this.tableColumn.length == 0) {
          //     let columns = this.$refs.xTable.getColumns();
          //     columns.forEach((item) => {
          //         this.tableColumn.push({ title: item.title, field: item.property });
          //     });
          // }
          // let data = this.getExportData();
          // let book = XLSX.utils.book_new();
          // let sheet = XLSX.utils.json_to_sheet(data, { skipHeader: true });
          // XLSX.utils.book_append_sheet(book, sheet);
          // let wbout = XLSX.write(book, { bookType: "xlsx", bookSST: false, type: "binary" });
          // let blob = new Blob([this.toBuffer(wbout)], { type: "application/octet-stream" });
          // // 保存导出
          // FileSaver.saveAs(blob, "LIS847专家评语.xlsx");
          let p = { prgno: "LIS847" };
          this.$pub.commexport(this, p, `专家评语.dat`);
      },
      toBuffer(wbout) {
          let buf = new ArrayBuffer(wbout.length);
          let view = new Uint8Array(buf);
          for (let index = 0; index !== wbout.length; ++index) view[index] = wbout.charCodeAt(index) & 0xff;
          return buf;
      },
      getExportData(index) {
          let datas = this.tableData;
          let columns = this.tableColumn.filter((item) => item.field);
          let headers = [columns.map((item) => item.title)];
          return headers.concat(
              datas.map((row) => {
                  return columns.map((column) => {
                      return row[column.field];
                  });
              })
          );
      },
      btnClear() {
          this.$confirm("您确定要取消这次改动吗？", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          })
              .then(() => {
                  this.changeflag = false;
                  this.querydetail(this.selrow);
              })
              .catch(() => {});
      },
      btnCopy() {
          this.selrow = this.$refs.xTable.getCurrentRow();
      },
      btnPaste() {
          this.lab_germcomment = XEUtils.clone(this.selrow, true);
      },
      rowClassName1({ row, rowIndex }) {
          // let isDirty = this.$refs.xTable.hasRowChange(row);
          // if (isDirty) {
          //     return "row-modify";
          // }
          // if (this.$refs.xTable.hasRowInsert(row)) {
          //     return "row-new";
          // }
          let keyid = row.germcommentid + "$" + row.germcommentcode;
          if (this.AddData.indexOf(keyid) > -1) {
              return "row-new";
          }
          if (this.ModData.indexOf(keyid) > -1) {
              return "row-modify";
          }
      },
      async currentChange({ row }) {
          if (this.changeflag) {
              this.$refs.xTable.setCurrentRow(this.selrow);
              return false;
          } else {
              await this.querydetail(row);
          }
      },
      ImportCsv() {
          this.$refs["upload"].$refs["upload-inner"].handleClick();
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
          let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
          let size = file.size / 1024 / 1024;
          if (extension !== "dat") {
              this.$notify.warning({
                  title: "警告",
                  message: `只能上传DAT(*dat)文件，且不超过10M`
              });
          }
          if (size > 10) {
              this.$notify.warning({
                  title: "警告",
                  message: `文件大小不得超过10M`
              });
          }
      },
      uploadOpt(content) {
          let formData = new FormData()
          formData.append('action', 'BACCOMMOMUPLOAD');
          formData.append('file', content.file);
          this.$pub.uploadFileOpt(this, formData, "InitPage");
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
          this.form.file = file.raw;
      },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 505px;
  overflow: auto;
}

.middle-right {
  position: absolute;
  height: 100%;
  width: 500px;
  right: 0px;
  border: 1px solid #ccc;
}
.search-title {
  margin: 0 5px 0 20px;
  font-size: 12px;
}
.top-deal {
  right: 5px;
  position: absolute;
  top: 5px;
  display: flex;
  align-items: center;
}
/deep/ tr.vxe-body--row.row-modify {
  color: blue;
}
/deep/ tr.vxe-body--row.row-new {
  color: #cc6600;
}
.table1style tr td {
  padding: 2px 2px 2px 2px;
}
/deep/ .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}
.upload-button {
  height: 24px;
  margin: 0 10px;
  display: none;
}
.upload-button div {
  height: 24px;
}
</style>